<template>


  <div >
    <div style="margin-right: 90%;width: 10%;" >
    <a href="/"><img src="../static/images/new_logo.png"></a>
    </div>
    <div style="margin-left: 30%;" >
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"

      >
      <el-menu-item index="1"><a @click="handleSelect" target="_blank" >首页</a></el-menu-item>

      <el-menu-item index="6">
        <el-autocomplete
        v-model="state4"
        placeholder="请输入内容"
        text-color="#333333"
        @select="handleSelect"
        :fetch-suggestions="querySearchAsync"
        active-text-color="#333333"
      >
          <i
            class="el-icon-search el-input__icon"
            slot="suffix"
            @click="seach">
          </i>
          <template slot-scope="{ item }">
            <div class="name">{{ item.value }}</div>
          </template>
        </el-autocomplete>

      </el-menu-item>

      <el-menu-item index="7"><a href="https://www.ele.me" target="_blank" >历史</a></el-menu-item>
      <el-menu-item index="8"><a href="https://www.ele.me" target="_blank"  >关注</a></el-menu-item>
      <el-menu-item style="width: 95px" index="9"><a @click="handleSelect" style="font-size: 15px"  class="el-icon-shopping-cart-2" target="_blank" >购物车</a></el-menu-item>
      <el-menu-item index="11"><a @click="handleSelect" target="_blank" >订单</a></el-menu-item>

      <el-submenu index="10" v-if="validate">

        <template slot="title">
          <img style="border-radius:100%" :src=user.pic
               class="avator"/>
        <span class="name"  style="color: black;">{{user.loginName}}</span>
        </template>
        <el-menu-item index="10-1" @click="logout">退出</el-menu-item>
        <el-menu-item index="10-2">个人中心</el-menu-item>
        <el-menu-item index="10-3">订单详情</el-menu-item>
      </el-submenu>
      <el-menu-item index="10" v-if="!validate"><router-link to="/login" target="_blank">登录</router-link></el-menu-item>

    </el-menu>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        user:{
          pic:'',
          loginName:''
        },
          restaurants: [],
          state4: '',
          timeout:  null,
          validate:false,

      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key);
        //用户退出
        if (key=="10-1"){
           // axios.post("userapi/qflive-user/user/loginOut").then(res => {
              //if (res.data.success){
                //cookie.remove("token")
                //清除token
                this.$cookies.remove("token")
                //this.$router.push("/").catch(data => {  })
                //刷新页面
                location.reload()
              //}
            //})
        }
        //用户详细信息
        if (key=="10-2"){
          this.$router.push("/user/user-detail")
        }

        //登录页面
        if (!this.validata&&key=="10"){
          this.$router.push("/login")

        }
        //首页
        if (key=="1"){
          this.$router.push("/")
        }
        //搜索
        if (key=="6"){
         //实时搜索

        }
        if (key=="9"){
          this.$router.push("/shopCard")
        }
        if (key=="11"){
          this.$router.push("/confirm")
        }
        if (key=="10-3"){
          this.$router.push("/orderinfo")
        }
      },
      loadAll() {
        return [
          { "value": "java"},
          { "value": "python"},
          { "value": "html"}
        ];
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      logout:function () {

      },
      //跳转搜索页面
      seach:function () {
        this.$router.push("/courseSearch/"+this.state4)
      }
    },
      mounted() {
        this.$axios.post("/user/findUserByToken").then(res => {
          console.log(res.data)
          this.validate = res.data.code==0;
          if (res.data.code==0) {

            this.user = res.data.data;
          }
          if (res.data.code == 1) {
            this.$router.push("/login").catch(data => {  })
          }
        })
        this.restaurants = this.loadAll();
      }

  }
</script>

<style scoped>
  .avator {
    width: 40px;
    height: 40px;
  }
   .name {
    margin-top: 20px;
    color: #333;
  }
</style>
